<!-- @format -->

<template>
  <div>
    <!-- 对话框 -->
    <el-dialog v-dialogDrag :visible.sync="diaVisible" v-bind="$attrs" v-on="$listeners">
      <!-- 标题插槽 -->
      <template v-slot:title>
        <slot name="title"></slot>
      </template>
      <slot></slot>
      <!-- 底部按钮插槽 -->
      <template v-slot:footer>
        <slot name="footer"></slot>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      diaVisible: null,
    };
  },
  props: {
    // 必传值 :dialogVisible.sync="dialogVisible" 双向绑定
    visible: {
      type: Boolean,
      default: () => false,
    },
  },
  components: {},
  watch: {
    /* 是否可见 */
    visible: {
      handler(val) {
        this.diaVisible = val;
      },
      immediate: true,
    },
    diaVisible: {
      handler(val) {
        this.$emit('update:visible', val);
      },
    },
  },
};
</script>
<style lang="scss" scoped>
/* 对话框样式 */
::v-deep .el-dialog {
  background-color: var(--html-bgc);
  box-shadow: var(--dialog-box-shadow);
  border: var(--dialog-border);
  border-radius: 10px;
}
/* 对话框head样式 */
::v-deep .el-dialog__header {
  color: var(--dialog-title-color) !important;
  font-size: var(--dialog-title-fontsize) !important;
  background: var(--dialog-title-bgc) !important;
  // background-image: url('../../assets/images/formTitle.png');
  // background-repeat: no-repeat;
  padding: 0px 0 0 10px;
  height: 41px;
  line-height: 41px;
  font-weight: bold;
  text-align: left;
  // border-top-left-radius: 10px;
  // border-top-right-radius: 10px;
}
/* 对话框body样式 */
::v-deep .el-dialog__body {
  color: var(--dialog-body-color) !important;
  font-size: var(--dialog-body-fontsize) !important;
  background-color: var(--html-bgc) !important;
  border-radius: var(--dialog-body-radius);
  padding: 0px;
  height: 100%;
}
/* 对话框右上角关闭按钮样式 */
::v-deep .el-dialog__headerbtn {
  height: 26px;
  width: 26px;
  font-size: 20px;
  top: 8px;
}
::v-deep .el-dialog__title {
  color: var(--dialog-title-color) !important;
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff !important;
}
</style>
